<template>
	<view class="content">
		<u-navbar :placeholder='true' title="用戶密碼修改" leftIcon="arrow-leftward"
			@leftClick="leftClick('/pages/mine/setting/index')">
		</u-navbar>
		<view class="main">
			<view>
				<view class="form">
					<view class="form-l">
						登錄名
					</view>
					<view class="form-r">
						<input disabled v-model="userinfo.username" class="input-item" type="text">
					</view>
				</view>
				<view class="form">
					<view class="form-l">
						原密碼
						<text style="color:#ED0000 ;">*</text>
					</view>
					<view class="form-r pwdflex" >
						<input v-model="form.oldpassword"   class="input-item" :type="oldShow?'text':'password'" placeholder="請輸入原密碼">
            <view>
              <u-icon :name="oldShow?'eye-fill':'eye-off'" size="23" @click="oldShow=!oldShow" ></u-icon>
            </view>
					</view>
				</view>
				<view class="form">
					<view class="form-l">
						新密碼
						<text style="color:#ED0000 ;">*</text>
					</view>
					<view class="form-r pwdflex">
						<input v-model="form.newpassword" class="input-item" :type="oldShow1?'text':'password'" placeholder="請輸入新密碼">
            <view>
              <u-icon :name="oldShow1?'eye-fill':'eye-off'" size="23" @click="oldShow1=!oldShow1" ></u-icon>
            </view>
					</view>
				</view>
				<view class="form">
					<view class="form-l">
						確認密碼
						<text style="color:#ED0000 ;">*</text>
					</view>
					<view class="form-r pwdflex">
						<input v-model="form.check_pwd" class="input-item" :type="oldShow2?'text':'password'" placeholder="再次輸入新密碼">
            <view>
              <u-icon :name="oldShow2?'eye-fill':'eye-off'" size="23" @click="oldShow2=!oldShow2" ></u-icon>
            </view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	import {
		changePwd
	} from '@/network/api/setting.js'
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
        oldShow: false,
        oldShow1: false,
        oldShow2: false,
				form: {
					oldpassword: "",
					newpassword: "",
					check_pwd: "",
				},
			}
		},
		computed: mapState({
			userinfo: state => state.user.userinfo,
		}),
		methods: {
			async submit() {
				if (!this.form.oldpassword || !this.form.newpassword || !this.form.check_pwd) {
					return uni.showToast({
						title: '请输入密码',
						icon: 'none',
					})
				}
				if (this.form.check_pwd != this.form.newpassword) {
					return uni.showToast({
						title: '请输入密码',
						icon: '两次密码不一致',
					})
				}
				let data = {
					oldpassword: this.form.oldpassword,
					newpassword: this.form.newpassword,
				}
				const res = await changePwd(data)
				if (res.data.code == 1) {
					return uni.showToast({
						title: '修改成功',
					})
				} else if (res.data.code == 2) {
					return uni.showToast({
						title: '原密码错误，请重新输入',
						icon: 'none'
					})
				}
			},
			leftClick(url) {
				console.log('rightClick');
			uni.navigateBack()
			},
		}
	}
</script>


<style lang="scss">
	.content {
		background-color: #F5F6F9;
		width: 100%;
		height: 100vh;
   .pwdflex{
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
    .input-item{
        outline: none;
        -webkit-appearance: button;
        -webkit-appearance: none;
        border-radius: 0;
        background: none;
        border: none;
    }
    .main {
			background-color: #fff;

			.form {
				margin: 0 32rpx;
				padding: 32rpx 0;
				display: flex;
				border-bottom: 1rpx solid #DEDEDE;
				;

				.form-l {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}

				.form-r {
					margin-left: 48rpx;
					flex: 1;

					.picker {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.uni-input {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
              outline: none;
              -webkit-appearance: button;
              -webkit-appearance: none;
              border-radius: 0;
              background: none;
              border: none;
						}
					}
				}
			}

		}

		.open {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			margin-top: 22rpx;
			background-color: #fff;
			padding: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.btn {
			position: absolute;
			bottom: 15rpx;
			left: 50%;
			transform: translateX(-50%);
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 80rpx;
			color: #FFFFFF;
			width: 686rpx;
			height: 80rpx;
			text-align: center;
			background: #645AED;
			opacity: 1;
			border-radius: 30rpx;
		}
	}
</style>
